import React from 'react'
import { Form, Select, Space, Card, Input, Radio, InputNumber, Cascader, Checkbox } from 'antd'
import Upload from '@/components/FormUploadImg'

export default ({ list, disabled = false }) => {
  const renderFormList = list => {
    return list.map(formItem => {
      const { type, title, wrapperProps, children, formProp, itemProp, component, options } = formItem

      switch (type) {
        case 'wrapper':
          return (
            <Card title={title} key={title} style={{ marginBottom: '16px' }}>
              {component ? component : renderFormList(children)}
            </Card>
          )
        case 'tabWrapper':
          return (
            <Card title={title} key={title} style={{ marginBottom: '16px' }} {...wrapperProps}>
              {component ? component : renderFormList(children)}
            </Card>
          )
        case 'component':
          return <div key={title}>{component ? component : renderFormList(children)}</div>
        case 'input':
          return (
            <Form.Item {...formProp} key={title}>
              <Input disabled={disabled} {...itemProp} />
            </Form.Item>
          )
        case 'inputNumber':
          return (
            <Form.Item {...formProp} key={title}>
              <InputNumber disabled={disabled} {...itemProp} />
            </Form.Item>
          )
        case 'radio':
          return (
            <Form.Item {...formProp} key={title}>
              <Radio.Group disabled={disabled} {...itemProp.prop}>
                {options === 'vertical' ? (
                  <Space direction='vertical' style={{ paddingTop: '5px' }}>
                    {itemProp.list && itemProp.list.length
                      ? itemProp.list.map(radio => (
                          <Radio value={radio.value} key={radio.value}>
                            {radio.label}
                          </Radio>
                        ))
                      : null}
                  </Space>
                ) : itemProp.list && itemProp.list.length ? (
                  itemProp.list.map(radio => (
                    <Radio value={radio.value} key={radio.value}>
                      {radio.label}
                    </Radio>
                  ))
                ) : null}
              </Radio.Group>
            </Form.Item>
          )
        case 'select':
          return (
            <Form.Item {...formProp} key={title}>
              <Select disabled={disabled} {...itemProp.prop} />
            </Form.Item>
          )
        case 'upload':
          return (
            // <Form.Item
            //   {...formProp}
            //   key={title}
            // >
            //   <Upload disabled={disabled} {...itemProp} />
            // </Form.Item>
            <Upload
              disabled={disabled}
              key={title}
              name={formProp.name}
              label={title}
              required={formProp.required}
              text={formProp.text}
              maxCount={formProp.maxCount}
            />
          )
        case 'cascader':
          return (
            <Form.Item {...formProp} key={title}>
              <Cascader disabled={disabled} {...itemProp} />
            </Form.Item>
          )
        case 'checkbox':
          return (
            <Form.Item {...formProp} key={title}>
              <Checkbox.Group disabled={disabled} onChange={reRenderForm} style={{ width: '100%' }}>
                {itemProp.list.map(i => (
                  <Checkbox key={i.label} value={i.value}>
                    {i.label}
                  </Checkbox>
                ))}
              </Checkbox.Group>
            </Form.Item>
          )
      }
    })
  }

  return <>{renderFormList(list)}</>
}
